<template>
  <div>
    <def-layout type="col0-24" :page="page" @invoke="invoke">
      <div slot="search" class="form-items">
        <el-form-item>
          <el-input v-model="formSearch.keyword" placeholder="名称/编码" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="formSearch.used" placeholder="状态">
            <el-option
              v-for="item in constants.used.values()"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <form-area v-model="formSearch.areaIds" :def-show="true" placeholder="选择地区" :change-on-select="true" :level="3" />
        </el-form-item>
        <el-form-item>
          <duty-users v-model="formSearch.salesmanId" size="mini" mode="search" placeholder="业务员" :duty-id="$store.state.settings.wmsConf.purchase.dutyId[1]" />
        </el-form-item>
        <el-form-item label="" prop="serviceId">
          <form-remote-select
            v-model="formSearch.serviceId"
            :url="$http.conf.api.get('wms').url+'/api/service/index/findServiceList'"
            placeholder="客服"
          />
        </el-form-item>
        <el-form-item>
          <el-select v-model="formSearch.isBind" placeholder="绑定状态" :disabled="paramsStatus==101">
            <el-option
              v-for="item in constants.isBind.values()"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formSearch.distributeStatus" placeholder="分配状态" :disabled="paramsStatus==102">
            <el-option
              v-for="item in constants.distributeStatus.values()"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="无活跃数">
          <el-input v-model="formSearch.silence[0]" type="number" placeholder="( 起 )天" :disabled="paramsStatus==15 || paramsStatus==25" @input="silenceChange1" />
        </el-form-item>
        <el-form-item label="—">
          <el-input v-model="formSearch.silence[1]" type="number" placeholder="( 止 )天" :disabled="paramsStatus==15 || paramsStatus==25" @input="silenceChange2" />
        </el-form-item>

        <el-form-item>
          <el-date-picker
            v-model="formSearch.createTime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="创建时间(起)"
            end-placeholder="创建时间(止)"
            value-format="yyyy-MM-dd"
            :picker-options="$constants.pickerOptions"
          />
        </el-form-item>
      </div>
      <div slot="content" class="grid">
        <page-grid v-if="self!=null" :parent="self">
          <div slot="columns">
            <el-table-column prop="used" align="center" label="状态" width="100">
              <template slot-scope="scope">
                <column-filter v-model="scope.row.used" type="used" @click="filter" />
              </template>
            </el-table-column>

            <el-table-column prop="salesmanId" align="center" label="绑定状态" width="100">
              <template slot-scope="scope">
                <label v-if="scope.row.salesmanId !=null" class="mainColor">已绑定</label>
                <label v-else class="red">未绑定</label>
              </template>
            </el-table-column>

            <el-table-column prop="serviceId" align="center" label="分配状态" width="100">
              <template slot-scope="scope">
                <label v-if="scope.row.serviceId !=null" class="mainColor">已分配</label>
                <label v-else class="red">未分配</label>
              </template>
            </el-table-column>

            <el-table-column prop="no" align="center" label="编码" width="150" />
            <el-table-column prop="name" align="center" label="名称" width="290" />
            <el-table-column prop="mobile" align="center" label="手机" width="150" />
            <el-table-column prop="silence" align="center" label="无活跃天数" width="150">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.silence < 15 && scope.row.silence >=0" type="success">{{ scope.row.silence }}天</el-tag>
                <el-tag v-else-if="scope.row.silence >=15 && scope.row.silence <= 24" type="warning">{{ scope.row.silence }}天</el-tag>
                <el-tag v-else-if="scope.row.silence >=25 && scope.row.silence<=34" type="danger">{{ scope.row.silence }}天</el-tag>
                <el-tag v-else type="info">{{ scope.row.silence }}天</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="orderCount" sortable align="center" label="供货次数" width="100" />
            <el-table-column prop="remindCount" sortable align="center" label="跟催次数" width="100" />
            <el-table-column prop="sales" sortable align="center" label="交易额" width="100" />
            <el-table-column prop="weight" sortable align="center" label="总重" width="100" />
            <el-table-column prop="service.realName" align="center" label="客服" width="100" />
            <el-table-column prop="salesman.realName" align="center" label="业务员" width="100" />
            <el-table-column prop="area" align="center" label="地区" width="150" />
            <el-table-column prop="createTime" sortable align="center" label="创建时间" width="150" />
          </div>
        </page-grid>
      </div>
    </def-layout>
    <!-- 提醒 -->
    <remind ref="remind" @bindQuery="remindQuery" />
    <!-- 分配客服 -->
    <distribute ref="distribute" @bindQuery="distributeQuery" />
    <!-- 绑定客服 -->
    <bind ref="bind" @bindQuery="bindQuery" />
  </div>
</template>
<script>
import adminSupport from 'lola-admin-support-el'
import Remind from './remind'
import Distribute from './distributeCustomer'
import bind from './bindCustomer'
import formDate from '@/utils/formatDate'
export default {
  name: 'CustomerSupplierManage',
  components: {
    Remind, Distribute, bind
  },
  filters: {

  },
  mixins: [adminSupport.mixins.index],
  data() {
    return {
      name: 'CustomerSupplierManage',
      formSearch: { keyword: '', used: '', areaIds: '', isBind: '', silence: [] },
      self: null,
      paramsStatus: null // 路由参数
    }
  },
  created() {
    const that = this
    var type = that.$route.params.type
    that.paramsStatus = type

    that.init()// 页面自定义初始化
  },
  methods: {
    silenceChange1(val) {
      console.log(val)
      this.formSearch.updateTime[0] = this.getDay(-val)
    },
    silenceChange2(val) {
      console.log(val)
      this.formSearch.updateTime[1] = this.getDay(-val)
    },
    getDay(day) {
      return formDate.getDay(day)
    },
    init() {
      var that = this
      that.loadedParams()
      that.loadData()// 加载数据(按钮+列表) 扩展需重写该方法
      that.self = that

      if (that.paramsStatus != null && that.paramsStatus !== undefined && that.paramsStatus !== ':type') {
        console.log('事务中心跳转存在路由参数========')
        that.search()
      }
    },
    // 加载路由参数
    loadedParams() {
      var that = this
      var status = that.paramsStatus
      if (status !== null) {
        switch (that.paramsStatus) {
          case '15':
            that.formSearch.silence[0] = 15
            that.formSearch.silence[1] = 24
            that.formSearch.updateTime[0] = that.getDay(-15)
            that.formSearch.updateTime[1] = that.getDay(-24)
            that.formSearch.isBind = 1
            that.formSearch.used = 'Y'
            break
          case '25':
            that.formSearch.silence[0] = 25
            that.formSearch.silence[1] = 34
            that.formSearch.updateTime[0] = that.getDay(-25)
            that.formSearch.updateTime[1] = that.getDay(-34)
            that.formSearch.isBind = 1
            that.formSearch.used = 'Y'
            break
          case '101':
            that.formSearch.isBind = 0
            that.formSearch.used = 'Y'
            break
          case '102':
            that.formSearch.distributeStatus = 0
            that.formSearch.used = 'Y'
            break
          default:
            break
        }
      }
    },
    search() {
      const queryList = []
      this.loadedParams()
      if (!String.isNullOrEmpty(this.formSearch.keyword)) {
        queryList.push({ 'key': 'o.name', 'value': {
          'o.name': this.formSearch.keyword,
          'o.no': this.formSearch.keyword
        }, 'oper': ':', 'join': 'andOr' })
      }
      if (!String.isNullOrEmpty(this.formSearch.used) && this.formSearch.used !== 'All') queryList.push({ 'key': 'o.used', 'value': this.formSearch.used, 'oper': '=', 'join': 'and' })
      if (!String.isNullOrEmpty(this.formSearch.salesmanId)) queryList.push({ 'key': 'o.salesmanId', 'value': this.formSearch.salesmanId, 'oper': '=', 'join': 'and' })
      if (!String.isNullOrEmpty(this.formSearch.serviceId)) queryList.push({ 'key': 'o.serviceId', 'value': this.formSearch.serviceId, 'oper': '=', 'join': 'and' })
      if (!String.isNullOrEmpty(this.formSearch.silence)) {
        queryList.push({ 'key': 'o.updateTime', 'value': this.formSearch.updateTime[0] + ' ' + '59:59:59', 'oper': '<=', 'join': 'and' })
        queryList.push({ 'key': 'o.updateTime', 'value': this.formSearch.updateTime[1] + ' ' + '00:00:00', 'oper': '>=', 'join': 'and' })
      }
      if (!String.isNullOrEmpty(this.formSearch.isBind) && this.formSearch.isBind !== 'All') {
        if (this.formSearch.isBind === 0) {
          queryList.push({ 'key': 'o.salesmanId', 'value': '', 'oper': 'null', 'join': 'and' })
        } else {
          queryList.push({ 'key': 'o.salesmanId', 'value': '', 'oper': '!=null', 'join': 'and' })
        }
      }
      if (!String.isNullOrEmpty(this.formSearch.distributeStatus) && this.formSearch.distributeStatus !== 'All') {
        if (this.formSearch.distributeStatus === 0) {
          queryList.push({ 'key': 'o.serviceId', 'value': '', 'oper': 'null', 'join': 'and' })
        } else {
          queryList.push({ 'key': 'o.serviceId', 'value': '', 'oper': '!=null', 'join': 'and' })
        }
      }
      if (!String.isNullOrEmpty(this.formSearch.areaIds)) {
        queryList.push({ 'key': 'o.areaIds', 'value': this.formSearch.areaIds, 'oper': ':', 'join': 'and' })
      }
      if (this.formSearch.createTime !== null && this.formSearch.createTime.length > 0) {
        queryList.push({ 'key': 'o.createTime', 'value': this.formSearch.createTime[0], 'oper': '>=', 'join': 'and' })
        queryList.push({ 'key': 'o.createTime', 'value': this.formSearch.createTime[1], 'oper': '<=', 'join': 'and' })
      }
      this.dataGrid.params.queryList = queryList
      this.refresh()
    },
    bindSearch() {
      this.formSearch = { keyword: '', used: '', areaIds: '', isBind: '', distributeStatus: '', silence: [], updateTime: [], createTime: [] }
    },
    // 重写按钮方法
    buildOtherBtn(item, btn) {
      switch (item.code) {
        case 'm5617':
          btn.type = 'info'
          btn.opt = 'assignService' // 分配客服
          break
        case 'm5618':
          btn.type = 'warning'
          btn.opt = 'relieveService' // 解除客服
          break
        case 'm5619':
          btn.type = ''
          btn.opt = 'bindService' // 绑定客服
          break
        case 'm56191':
          btn.type = 'warning'
          btn.opt = 'UntieService' // 解绑客服
          break
        case 'm56192':
          btn.type = 'danger'
          btn.opt = 'remind' // 提醒
          break
      }
    },
    // 绑定客服
    bindService(row) {
      this.$refs['bind'].bind(row)
    },
    // 解绑客服
    UntieService(row) {
      const that = this
      that.$confirm(
        '请确认是否对供应商【' + row.name + '】进行解绑业务员操作?',
        '系统提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          const url = that.service.conf.api.get('wms').url + '/api/ser/supplier-info/unBindService'
          that.service.post(url, { id: row.id })
            .then(function(rsp) {
              if (rsp.code !== 200) {
                that.$message.error(rsp.message)
                return
              }
              that.$message.success('操作成功!')
              that.search()
            })
            .catch(function(err) {
              that.$message.error('服务端异常')
              console.log(err)
            })
        })
        .catch(() => {
          // 取消
        })
    },
    // 分配客服
    assignService(row) {
      this.$refs['distribute'].bind(row)
    },
    // 解除客服
    relieveService(row) {
      const that = this
      that.$confirm(
        '请确认是否对供应商【' + row.name + '】进行解除客服操作?',
        '系统提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        const url = that.service.conf.api.get('wms').url + '/api/ser/supplier-info/unAllotService'
        that.service.post(url, { id: row.id })
          .then(function(rsp) {
            if (rsp.code !== 200) {
              that.$message.error(rsp.message)
              return
            }
            that.$message.success('操作成功!')
            that.search()
          })
          .catch(function(err) {
            that.$message.error('服务端异常')
            console.log(err)
          })
      }).catch(() => {
        // 取消
      })
    },
    // 提醒
    remind(row) {
      console.log(row)
      if (!row.salesmanId || row.salesmanId == null) {
        this.$message.error('当前供应商未绑定业务员'); return
      }
      this.$refs['remind'].bind(row)
    },
    remindQuery() {
      this.search()
    },
    distributeQuery() {
      this.search()
    },
    bindQuery() {
      this.search()
    }

  }
}
</script>
